<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
<script type="module" src="../src/w2compat.js?globals"></script>
<script>
$(function () {

    // -- LAYOUT

    var pstyle = 'background-color: #F5F6F7; overflow: hidden';
    $('#layout').w2layout({
        name: 'layout',
        padding: 6,
        panels: [
            { type: 'main', style: pstyle },
            { type: 'right', size: '50%', style: pstyle, resizable: true },
            { type: 'preview', size: '20%', style: pstyle, resizable: true }
        ]
    });

    // -- GRID

    $().w2grid({
        name: 'grid',
        show: {
            toolbar: true,
            footer: true
        },
        searches: [
            { field: 'recid', caption: 'ID (int)', type: 'int' },
            { field: 'id', caption: 'ID (float)', type: 'float' },
            { field: 'fname', caption: 'First Name', type: 'text' },
            { field: 'lname', caption: 'Last Name', type: 'text' },
            { field: 'email', caption: 'Email', type: 'list', items: ['vitali@gmail.com', 'jim@gmail.com'] },
            { field: 'sdate', caption: 'Date', type: 'date' }
        ],
        sortData: [ { field: 'recid', direction: 'asc' } ],
        columns: [
            { field: 'recid', caption: 'ID', size: '50px', sortable: true, resizable: true },
            { field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
            { field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true },
            { field: 'email', caption: 'Email', size: '40%', resizable: true, sortable: true },
            { field: 'sdate', caption: 'Start Date', size: '120px', resizable: true },
            { field: 'sdate', caption: 'End Date', size: '120px', resizable: true },
            { field: 'sdate', caption: 'Release Date', size: '120px', resizable: true },
        ],
        records: [
            { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
            { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
            { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
            { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' },
            { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '8/25/2012' },
            { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '9/3/2012' },
            { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '10/3/2012' },
            { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 22, fname: 'Peter', lname: 'Franson', email: 'vitali@gmail.com', sdate: '4/3/2012' },
            { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jim@gmail.com', sdate: '12/3/2012' },
            { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jim@gmail.com', sdate: '4/3/2012' },
            { recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 27, fname: 'Shashi', lname: 'bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
        ],
        onClick(event) {
            var rec = this.get(event.recid);
            w2ui['form'].record = rec;
            w2ui['form'].refresh();
            event.onComplete = function () {
                if (this.getSelection().length == 0) $('#delete').attr('disabled', true); else $('#delete').removeAttr('disabled');
            }
        }
    });

    // -- FORM

    $().w2form({
        name     : 'form',
        form_url : 'form-template.html',
        fields: [
            { name: 'fname', type: 'text', required: true },
            { name: 'lname', type: 'text', required: true },
            { name: 'email', type: 'email' },
            { name: 'sdate',  type: 'date' }
        ],
        onRefresh: function (event) {

        },
        actions: {
            Reset() {
                this.clear();
            },
            Save() {
                // check for errors
                var errors = this.validate();
                if (errors.length > 0 ) return;

                var rec = this.record;
                if (typeof rec.recid == 'undefined') { // new record
                    rec.recid = 100 + w2ui['grid'].records.length;
                    w2ui['grid'].add(rec);
                } else { // existing
                    if (!w2ui['grid'].get(rec.recid)) alert('Record is not found.');
                    w2ui['grid'].set(rec.recid, rec);
                }
                //w2ui['grid'].refresh();
            },
            delete: function () {
                this.clear();
                w2ui['grid'].remove.apply(w2ui['grid'], w2ui['grid'].getSelection());
                $('#delete').attr('disabled', true);
            }
        }
    });

    // -- INITIATE
    w2ui.layout.html('main', w2ui.grid);
    w2ui.layout.html('right', w2ui.form);
});
</script>
</head>
<body>
    <div id="layout" style="width: 100%; height: 500px;"></div>
</body>
</html>
